Travel far enough you meet yourself.
走得足夠遠，你就會遇上自己。

primeVue UI 套件真的很強大，也出 圖表Chart套件。

先安裝 Chart.js

npm install chart.js

Chart.js 是一個流行的 JavaScript 圖表庫，創建各種各樣的圖表，例如折線圖、條形圖、圓餅圖等。提供了簡單的 API 和定制的選項，生成視覺化的數據圖表。

Chart的基本配置說明

1. type（類型）
   功能: 定義圖表的顯示類型。

• pie: 圓餅圖，顯示各部分在整體中的比例。
• doughnut: 圓環圖 類似於圓餅圖，中間的空白區域，顯示更多的信息。
• line: 折線圖，顯示數據隨時間或其他連續變量的變化。
• bar: 條形圖，比較不同類別的數據。
• radar: 雷達圖，用來顯示多變量數據的分佈。
• polarArea: 區域圖，類似於圓餅圖，但以極坐標系統展示數據。

2. data（數據）
   功能: 定義要在圖表中顯示的數據集。
   datasets: 包含圖表的數據集合。每個數據集通常包括數據點（數據值）和相關的標籤、顏色等屬性。

3. options（選項）
   功能: 定義圖表的各種顯示和交互特性。

自定義: 包含許多屬性，允許用戶調整圖表的外觀和行為

• scales: 配置坐標軸的刻度和顯示方式。
• legend: 設置圖例的位置、顯示方式等。
• tooltips: 設置工具提示的內容和樣式。
• responsive: 設置圖表是否自適應不同的顯示設備。

範例- 條形圖（bar）

HTML 部分 (template 部分)

<template>
    <div class="card">
        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-30rem" />
    </div>
</template>

• type="bar": 設置圖表類型為條形圖。
• :data="chartData": 綁定 chartData 圖表的數據源。
• :options="chartOptions": 綁定 chartOptions 圖表的配置選項。
• class="h-30rem": 設置圖表的高度為 30rem。

JavaScript 部分 (script setup 部分)

<script setup>
import { ref, onMounted } from "vue";

onMounted(() => {
    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});

const chartData = ref();
const chartOptions = ref();

const setChartData = () =>  {
    const documentStyle = getComputedStyle(document.documentElement);

    return {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
            {
                type: 'bar',
                label: 'Dataset 1',
                backgroundColor: documentStyle.getPropertyValue('--cyan-500'),
                data: [50, 25, 12, 48, 90, 76, 42]
            },
            {
                type: 'bar',
                label: 'Dataset 2',
                backgroundColor: documentStyle.getPropertyValue('--gray-500'),
                data: [21, 84, 24, 75, 37, 65, 34]
            },
            {
                type: 'bar',
                label: 'Dataset 3',
                backgroundColor: documentStyle.getPropertyValue('--orange-500'),
                data: [41, 52, 24, 74, 23, 21, 32]
            }
        ]
    };
};

const setChartOptions = () =>  {
    const documentStyle = getComputedStyle(document.documentElement);
    const textColor = documentStyle.getPropertyValue('--text-color');
    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');

    return {
        maintainAspectRatio: false,
        aspectRatio: 0.8,
        plugins: {
            tooltips: {
                mode: 'index',
                intersect: false
            },
            legend: {
                labels: {
                    color: textColor
                }
            }
        },
        scales: {
            x: {
                stacked: true,
                ticks: {
                    color: textColorSecondary
                },
                grid: {
                    color: surfaceBorder
                }
            },
            y: {
                stacked: true,
                ticks: {
                    color: textColorSecondary
                },
                grid: {
                    color: surfaceBorder
                }
            }
        }
    };
}
</script>

1. onMounted 設定函數
   onMounted 用於在組件掛載後執行代碼。

onMounted(() => {
    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});

在組件掛載後，調用 setChartData 和 setChartOptions 函數來初始化圖表數據和選項。

2. chartData.value = setChartData();
   使用getComputedStyle(document.documentElement) 獲取根元素的計算樣式，從中提取 CSS 變量值（如顏色）。
   返回一個包含 labels 和 datasets 的對象：

• labels: X 軸的標籤。
• datasets: 包含多個數據集，每個數據集包括數據、顏色和標籤。

3. chartOptions.value = setChartOptions();
   同樣使用 getComputedStyle(document.documentElement) 來獲取樣式變量值（如文本顏色和邊框顏色）。
   返回一個配置對象：

• maintainAspectRatio: false: 禁用圖表的默認縱橫比，使其適應容器。
• aspectRatio: 0.8: 設置圖表的縱橫比為 0.8。
• plugins.tooltips: 配置工具提示的顯示模式和交互行為。
• plugins.legend.labels.color: 設置圖例的文本顏色。
• scales.x 和 scales.y: 設置 X 軸和 Y 軸的配置，包含網格線顏色、刻度顏色以及是否堆疊數據。

參考資料:
https://v3.primevue.org/chart/